<template>
    <div style="min-height:560px;">
        <div class="heading">
            <div class="heading-img" @click="dialogFormVisibleimg = true">
                <img :src="users.user_img">
            </div>
            <div class="heading-name">{{users.user_name}}  </div>
           
            <div class="heading-js">{{users.introduce}}</div>
            <div class="edit">
                <router-link style="font-size:15px;color:#999;border-bottom:solid 1px #999;" to="/updateUser">
                    <span>编辑个人信息</span>
                </router-link>
                <span >&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <router-link style="font-size:15px;color:#999;border-bottom:solid 1px #999;" to="/updatePass">
                    <span>修改密码</span>
                </router-link>
            </div>

        <el-dialog title="修改用户头像" :visible.sync="dialogFormVisibleimg">
            <div>
                <el-upload action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange"></el-upload>
                <el-button type="success" @click="submitUpload">上传到服务器</el-button>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleimg = false">取 消</el-button>
            </div>
        </el-dialog>


        </div>
        <div class="container">
            <router-link :to="{name:'myStory'}"><span>我的故事</span> </router-link>
            <router-link :to="{name:'comment'}"><span>我的评论</span> </router-link>
            <router-link :to="{name:'likely'}"><span>我的点赞</span> </router-link>
            <router-link :to="{name:'collect'}"><span>我的收藏</span> </router-link>
             <hr>
            <router-view></router-view>
           
        </div>
    </div>
</template>

<script>

export default {
    name:"center",
   data () {
      return {
        users: [],
        id:'',
        dialogFormVisibleimg:false,
        fileList:[],
        msg:''
      }
    },
    methods:{
        handleChange(file,fileList) { 
                this.fileList = fileList;
        },
        submitUpload() {
        let formData = new FormData(); //文件转换
        formData.append("fileList", this.fileList[0].raw);
        this.$axios.post('userimgUpload.do', formData, {
                    "Content-Type": "multipart/form-data;charset=utf-8"
                }).then(res => {
                    this.msg=res.data;
                    console.log(res+"上传成功")
                    this.$axios.get('updateUser.do?user_img='+this.msg+'&user_id='+this.id).then(
                    response=>{
                    if(response.data>0){
                        this.dialogFormVisibleimg=false
                    }else{
                       alert("修改失败")
                    }
                    }
                )   
                })
         
        }

    },
    mounted(){
        this.id=window.localStorage.getItem("uid");
        console.log(this.id+"asd132");
        this.$axios.get('/getUserByid.do?user_id='+this.id).then(response=>{
        this.users = response.data;
       
         console.log(this.users+"列表");
         console.log(this.users.user_id+"用户ID");
       })

        
    },


};
</script>

<style scoped="scoped">
a{
  text-decoration: none;
}
.heading{
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #21262c;
    height: 340px;
}
.heading-img img{
    width: 150px;
    border-radius: 50%;
}
.heading-img{
   padding-top:60px;
}
.heading-name{
    font-size: 25px;
    color: #fff;
    padding-top: 10px;
}
.heading-js{
    font-size: 20px;
    color: #9ea0a0;
    margin-bottom: 15px;

}



.container{
    margin-top: 50px;
    width: 100%;
    text-align: center;
}
.container span{
    display: inline-block;
    width: 25%;
    font-size: 25px;
    color: #222324;

}
hr{
    padding: 0;
    margin: 0;
}

</style>